<template>
	<view class="user-release-page page">
		<view class="category-tab">
			<view style="border-radius: 5px 0 0 5px;" @click="conf.type=1" :class="conf.type==1?'active':''"
				class="tab-item">创业“蓝海”</view>
			<view style="border-radius: 0 5px 5px 0;" @click="conf.type=2" :class="conf.type==2?'active':''"
				class="tab-item">乡村集市</view>
		</view>
		<view class="status-tab">
			<view @click="conf.status=-1" :class="conf.status==-1?'active':''" class="tab-item">全部</view>
			<view @click="conf.status=0" :class="conf.status==0?'active':''" class="tab-item">待审核</view>
			<view @click="conf.status=1" :class="conf.status==1?'active':''" class="tab-item">已通过</view>
			<view @click="conf.status=2" :class="conf.status==2?'active':''" class="tab-item">未通过</view>
		</view>
		<view class="list-block" v-if="conf.type==1">
			<template v-if="list.length>0">
				<EntrepreneurshipItem class="item-com" background="#fff" type="mine" :info="item" v-for="item in list"
					:key="item.id"></EntrepreneurshipItem>
			</template>
			<view v-if="more==false&&list.length==0" class="empty">暂无数据</view>
			<view v-else-if="more==false&&list.length>0" class="empty">没有更多了</view>
		</view>
		<view class="list-block" v-else>
			<template v-if="list.length>0">
				<GoodsItem class="item-com" background="#fff" :info="item" type="mine" v-for="item in list"
					:key="item.id"></GoodsItem>
			</template>
			<view v-if="more==false&&list.length==0" class="empty">暂无数据</view>
			<view v-else-if="more==false&&list.length>0" class="empty">没有更多了</view>
		</view>
	</view>
</template>

<script>
	import EntrepreneurshipItem from '@/page_pack/components/ListItem/EntrepreneurshipItem'
	import GoodsItem from '@/components/ListItem/GoodsItem'
	import {
		getMyRelease
	} from '@/api/user'
	import {
		isMore
	} from '@/util/util'
	export default {
		components: {
			EntrepreneurshipItem,
			GoodsItem
		},
		data() {
			return {
				conf: {
					page: 1,
					limit: 20,
					type: 1,
					status: -1
				},
				list: [],
				more: true
			}
		},
		watch: {
			"conf.type": {
				handler() {
					this.handleRefresh()
				}
			},
			"conf.status": {
				handler() {
					this.handleRefresh()
				}
			}
		},
		methods: {
			handleRefresh() {
				this.conf.page = 1;
				this.more = true
				this.getList('refresh');
			},
			getList(type = '') {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				if (type == 'refresh') {
					this.list = []
				}
				getMyRelease(this.conf).then(res => {
					this.list = type == 'refresh' ? res.list : [...this.list, ...res.list];
					this.more = isMore(this.conf.page, this.conf.limit, res.count)
				}).finally(() => {
					uni.stopPullDownRefresh();
				})
			}
		},
		onPullDownRefresh() {
			this.handleRefresh();
		},
		onReachBottom() {
			if (this.more) {
				this.conf.page++;
				this.getList();
			}
		},
		onUnload() {
			uni.$off('refreshMine')
		},
		onLoad() {
			uni.$on('refreshMine', () => {
				this.handleRefresh()
			})
			this.getList('refresh');
		}
	}
</script>

<style lang="scss" scoped>
	.user-release-page {
		padding: 30rpx;

		.category-tab {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 30rpx;

			.tab-item {
				width: 200rpx;
				border: 1px solid $theme-color;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: $theme-color;
				font-size: 28rpx;
			}

			.tab-item.active {
				background: $theme-color;
				color: #fff;
			}
		}

		.status-tab {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.tab-item {
				width: calc(25% - 10rpx);
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #000;
				font-size: 28rpx;
				background: #fff;
				border-radius: 5px;
			}

			.tab-item.active {
				background: $theme-color;
				color: #fff;
			}
		}
	}
</style>